<template>
  <div class="user-login">
    <div class="user-login-bg"></div>
    <div class="page-login--layer page-login--layer-area">
      <ul class="circles"><li v-for="n in 10" :key="n"></li></ul>
    </div>
    <div class="page-login--layer page-login--layer-time" flex="main:center cross:center">{{time}}</div>
    <div class="content-wrapper">
      <div class="form-container">
        <span class="form-title">工具集</span>
        <el-form ref="form" :model="user" label-width="0" style="width:400px;padding-bottom:150px">
          <div class="form-items">
            <el-form-item prop="username" :rules="[ { required: true, message: '请输入用户名'}]">
              <el-input class="form-Item" prefix-icon="el-icon-user" style="width:100%" placeholder="用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" :rules="[ { required: true, message: '密码不能为空'}]">
              <el-input class="form-Item" prefix-icon="el-icon-lock" style="width:100%" type="password" placeholder="密码" v-model="user.password" show-password></el-input>
            </el-form-item>
            <el-button type="primary" class="submit-btn" size="small" @click="submitBtn" :loading='isloding'>登 录</el-button>
          </div>
          <!-- <el-row class="tips">
            <a href="/" class="link">
              立即注册
            </a>
            <span class="line">|</span>
            <a href="/" class="link">
              忘记密码
            </a>
          </el-row> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import BasicContainer from '@vue-materials/basic-container';
import dayjs from 'dayjs'
// import { userLogin } from "@/api/user.js";
export default {
  components: { BasicContainer },
  name: 'UserLogin',

  data() {
    return {
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      user: {
        username: '',
        password: '',
      },
      isloding:false
    };
  },

  created() {
    // this.$store.commit('SET_ALLROUTERS',[])
    // localStorage.removeItem('token')
    // localStorage.removeItem('uuid')
    // localStorage.removeItem('systool')
    // localStorage.removeItem('sysname')
    // localStorage.removeItem('appkey')
    // localStorage.removeItem('username')
  },
  mounted () {
    this.timeInterval = setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timeInterval)
  },
  methods: {
    refreshTime () {
      this.time = dayjs().format('HH:mm:ss')
    },
    submitBtn() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isloding = true
          // 登录
          // userLogin({
          //   userName: this.user.username,
          //   passWord: this.user.password
          // }).then((res) => {
          //   if (res.code == 200) {
          //     localStorage.setItem('token',res.data.accessToken)
          //     localStorage.setItem('uuid',res.data.tenants[0].tenantUuid)
          //     localStorage.setItem('username',res.data.tenants[0].tenantName)
          //     // this.$store.commit('SET_NAME',res.data.tenants[0].tenantName)
          //     // store.dispatch('d2admin/user/set', {
          //     //   name: res.data.tenants[0].tenantName
          //     // }, { root: true })
              this.$router.push({path:'/'})
              this.$message({
                message: '登录成功',
                type: 'success',
              });
          //   }else{
          //     this.$message({ message: res.msg,type: 'error', });
          //   }
          //   this.isloding = false
          // })
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import './UserLogin.scss';
</style>
